
<template>
    <div class="card">
        <template v-if="village">
            <div class="absolute right-8 top-5 z-10 cursor-pointer" @click="$router.back()">
                <svg-icon icon-class="back" /> 返回
            </div>
            <el-tabs v-model="active">
                <el-tab-pane label="停车系统配置" name="1" lazy>
                    <ParkConfig :village="village" />
                </el-tab-pane>
                <el-tab-pane label="门禁系统配置" name="2" lazy>
                    <GateConfig :village="village" />
                </el-tab-pane>
                <el-tab-pane label="安防视频配置" name="3" lazy>
                    <CameraConfig :village="village" />
                </el-tab-pane>
            </el-tabs>
        </template>
        <el-result v-else icon="error" title="请先选择项目"></el-result>
    </div>
</template>

<script lang="ts">
import EdCreateCard from 'src/components/EdCreateCard.vue'
import ParkConfig from './停车系统配置/ParkConfig.vue';
import GateConfig from './门禁系统配置/GateConfig.vue';
import CameraConfig from './安防视频配置/CameraConfig.vue';
import { defineComponent, nextTick } from 'vue';
import { Village } from '../types';

export default defineComponent({
    components: { ParkConfig, GateConfig, CameraConfig, EdCreateCard },
    data() {
        return {
            active: '1',
            village: undefined as Village | undefined
        }
    },
    activated() {
        const id = this.$route.query.villageId
        const name = this.$route.query.villageName
        if (id && typeof id === 'string' && name && typeof name === 'string') {
            this.village = undefined
            nextTick(() => {
                this.village = { id: parseInt(id), name }
            })
        }
    },
    deactivated() {
        this.active = '1'
    }
})

</script>

<style scoped lang="css">
.card {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px rgba(51, 61, 79, 0.03);
    border-radius: 12px;
    overflow: hidden;
    margin: 18px;
}

:deep(.el-tabs__nav) {
    margin: 0 16px;
}

:deep(.el-tabs .el-tabs__item) {
    height: 64px;
    line-height: 64px;
}

:deep(.el-tabs__content) {
    padding: 0 16px 16px 16px;
}

:deep(.el-tabs--card .el-tabs__nav) {
    margin: 0;
}

:deep(.el-tabs--card .el-tabs__item) {
    height: 40px;
    line-height: 40px;
}

:deep(.el-tabs--card .el-tabs__content) {
    padding: 0;
}
</style>

<style scoped lang="scss">
:deep {
    .el-tabs {
        .el-tabs__item {
            font-size: 18px;
            color: #8b8b9b;
        }

        .el-tabs__item.is-active {
            color: #1C1C1E;
            font-weight: 500;
        }

        .el-tabs__item:hover {
            color: #1C1C1E;
        }

        .el-tabs__active-bar {
            background: #EED096;
            height: 4px;
        }
    }

    .el-tabs.el-tabs--card {
        .el-tabs__item {
            font-size: 16px;
        }

        .el-tabs__item.is-active {
            position: relative;
            --badge-size: 8px;
            padding-left: calc(20px + var(--badge-size));
        }

        .el-tabs__item.is-active:before {
            content: '';
            background-color: #EED096;
            position: absolute;
            height: var(--badge-size);
            width: var(--badge-size);
            top: calc(50% - var(--badge-size) / 2);
            left: calc(20px - var(--badge-size) / 2);
            border-radius: calc(var(--badge-size) / 2);
        }
    }
}
</style>